<template>
  <div class="topic">
    <home-swiper :banner="banner" />

    <div class="content">
      <div class="recommend-company-title">
        <span>推荐商家</span>
        <div class="line"></div>
        <div class="btns">
          <div class="swiper-button-prev prev">
            <img src="~/assets/images/left.png" alt="" />
          </div>
          <div class="swiper-button-next next">
            <img src="~/assets/images/right.png" alt="" />
          </div>
        </div>
      </div>

      <div class="whiteBg pad20 mbt50">
        <swiper class="swiper recommend-company" :options="panelSwiper">
          <swiper-slide
            class="item"
            v-for="(item, index) in recommendList"
            :key="index"
          >
            <div
              @click="
                $router.push({ name: 'CompanyHomeHome', params: { id: 3 } })
              "
            >
              <div
                class="pic"
                :style="{ backgroundImage: 'url(' + item.mer_avatar + ')' }"
              ></div>
              <p class="name">{{ item.mer_name }}</p>
              <div class="certifi-and-settled">
                <div
                  class="certifi"
                  style="display: flex; align-items: center;"
                >
                  <img
                    src="~/assets/images/certification.png"
                    alt=""
                    style="margin-right: 10px;"
                  />
                  {{ item.is_authentication }}
                </div>
                <div
                  class="settled"
                  style="display: flex; align-items: center;"
                >
                  <img
                    src="~/assets/images/settle.png"
                    alt=""
                    style="margin-right: 10px;"
                  />
                  {{ item.time }}
                </div>
              </div>
              <div class="btns-group">
                <div class="btns" @click.stop>
                  <m-button
                    class="tagCopy"
                    size="mini"
                    v-clipboard:copy="url"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    type="borderedLight"
                    style="margin-right: 5px;"
                  >
                    <div class="share-text">
                      <img src="~/assets/images/share.png" alt="" />
                      分享
                    </div>
                  </m-button>
                  <m-button
                    size="mini"
                    type="borderedLight"
                    @click.stop="handleCollection(item)"
                  >
                    <div class="share-text">
                      <van-icon
                        style="margin-right: 5px"
                        v-if="!Boolean(item.is_recommend)"
                        name="like-o"
                        size="13"
                      />
                      <van-icon
                        v-else
                        style="margin-right: 5px"
                        name="like"
                        color="#E38B2B"
                        size="13"
                      />
                      {{ item.is_recommend == 1 ? "已收藏" : "收藏" }}
                    </div>
                  </m-button>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>

      <div class="recommend-product-title">推荐产品</div>
      <div class="recommend-product">
        <product-item
          class="item"
          v-for="(item, index) in list"
          :key="index"
          :name="item.title"
          :price="item.price"
          :storage="item.pcs"
          :image="item.image"
          :productId="item.product_id"
          :type="item.is_entity"
        />
      </div>
      <nodata message="暂无产品" :status="listStatus"></nodata>
      <m-pagination
        :pagination="total"
        :page-size="limit"
        @changePage="changeThisPage"
      />
    </div>
  </div>
</template>

<script>
import HomeSwiper from "./swiper/HomeSwiper.vue";
import ProductItem from "@/components/common/ProductItem";
import MPagination from "@/components/common/m-pagination/MPagination";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import MButton from "@/components/common/m-button/MButton";
import "swiper/dist/css/swiper.css";

import {
  getSerSpecialList,
  getProSpecialList,
  getSpecialBanner,
  getRecommendProList,
  getRecommendSerList,
  getCollection
} from "@/request/api";

import Vue from "vue";
import { Icon } from "vant";
Vue.use(Icon);

export default {
  name: "Topic",
  components: {
    MPagination,
    ProductItem,
    HomeSwiper,
    swiper,
    MButton,
    swiperSlide
  },
  data() {
    return {
      cateId: "",
      type: "",
      banner: [],
      list: [],
      page: 1,
      listStatus: 1,
      total: 0,
      limit: 10,
      recommendList: [],
      panelSwiper: {
        slidesPerView: 4,
        slidesPerColumn: 2,
        slidesPerGroup: 4,
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          disabledClass: "my-button-disabled",
          hiddenClass: "my-button-hidden"
        },
        observer: true
      },
      url: window.location.href
    };
  },
  created() {
    this.cateId = this.$route.query.cateId;
    this.type = this.$route.query.type;
    this.getBanner();
    this.getList();
    this.getRecommend();
  },
  methods: {
    // 获取banner图片
    getBanner() {
      let data = this.type === "service" ? "1" : "2";
      getSpecialBanner(data)
        .then(res => {
          if (res.status === 200) {
            this.banner = res.data || [];
            console.log(this.banner);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    // 获取推荐列表
    getRecommend() {
      if (this.type === "service") {
        getRecommendSerList()
          .then(res => {
            if (res.status === 200) {
              this.recommendList = res.data;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(err => {
            this.$message.error(err.message);
          });
      } else {
        getRecommendProList()
          .then(res => {
            if (res.status === 200) {
              this.recommendList = res.data;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(err => {
            this.$toastVant.fail(err.message);
          });
      }
    },
    /**
     * @param { int } id
     * @param { int } page 页码
     */
    getList() {
      this.listStatus = 1;
      this.list = [];
      let data = {
        id: this.cateId,
        page: this.page
      };
      let resData = "";
      if (this.type === "service") {
        getSerSpecialList(data)
          .then(res => {
            resData = res.data;
            this.UseList(resData);
          })
          .catch(err => {
            this.$toastVant.fail(err.message);
          });
      } else {
        getProSpecialList(data)
          .then(res => {
            resData = res.data;
            this.UseList(resData);
          })
          .catch(err => {
            this.$toastVant.fail(err.message);
          });
      }
    },
    UseList(resData) {
      this.list = resData.list;
      this.total = resData.count;
      if (this.total === 0) {
        this.listStatus = 0;
      } else {
        this.listStatus = 2;
      }
      window.scrollTo({ top: 0 });
    },
    changeThisPage(page) {
      this.page = page;
      this.getList();
    },
    onCopy(e) {
      this.$toastVant.success("分享链接复制成功");
    },
    onError(e) {
      this.$message.error("抱歉，复制失败！");
    },
    // 收藏产品
    handleCollection(item) {
      if (!this.$store.state.hasLogin) {
        setTimeout(() => {
          this.$toastVant({
            message: "登录后才可使用收藏和购物车功能",
            duration: 3000,
            forbidClick: true
          });
          this.$router.push({ name: "Login" });
        });
      } else {
        const params = {
          type_id: item.mer_id,
          type: 10
        };
        getCollection(params)
          .then(res => {
            if (res.status === 200) {
              this.$toastVant.success(res.message || "收藏成功！");
              this.getList();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(err => {
            this.$toastVant.fail(err.message);
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
@import "~@/assets/style/base.css";

.topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(243, 244, 247);
  padding-bottom: 80px;
  .recommend-company {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .item {
      width: 280px !important;
    }
  }

  .content {
    width: 1200px;
    margin-top: 50px;
    font-size: 16px;
    color: #666;
    /deep/ .swiper-wrapper {
      width: 100% !important;
    }
    /deep/ .swiper-slide {
      margin-top: 10px !important;
    }

    .recommend-company-title {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;

      span {
        font-size: 20px;
      }
      .line {
        width: calc(95% - 80px - 80px);
        height: 7px;
        background-color: rgb(220, 222, 227);
      }

      .btns {
        width: 80px;
        height: 31px;
        display: flex;
        position: relative;
        top: 5px;

        .prev,
        .next {
          width: 31px;
          height: 31px;
          border-radius: 31px;
          background-color: $theme-color-1;
          color: #fff;
          line-height: 31px;
          text-align: center;
          cursor: pointer;
          outline: none;
        }

        .prev {
          position: absolute;
          margin-right: 10px;
          left: -10px;
        }
      }
    }

    .recommend-company {
      .item {
        // width: 100%;
        // display: inline-flex;
        flex-direction: column;
        padding: 15px;
        font-size: 16px;
        color: #666;
        background-color: rgb(243, 244, 247);
        cursor: pointer;

        .pic {
          height: 120px;
          margin-bottom: 15px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }

        .name {
          margin-bottom: 10px;
        }

        .certifi-and-settled {
          margin-bottom: 10px;
          display: flex;
          font-size: 14px;
          .settled {
            margin-left: 35px;
          }
        }
        .btns-group {
          padding: 14px 0;
          display: flex;
          align-items: center;
          .tip-title {
            font-size: 14px;
            margin-left: 5px;
          }
        }
        .btns {
          display: flex;
          margin-left: 10px;
          position: absolute;
          bottom: 10px;
          right: 10px;
          .share-text {
            display: flex;
            align-items: center;
            font-size: 10px;
            img {
              width: 10px;
              height: 10px;
              margin-right: 5px;
            }
          }
        }
      }
    }

    .recommend-product-title {
      padding-left: 15px;
      border-left: solid 3px #666;
      margin-bottom: 30px;
    }

    .recommend-product {
      margin-bottom: 30px;

      .item {
        width: 14.5%;
        // margin: 10px;
      }
    }
  }
}
</style>
